// import { getArticleListByIdAction } from '@/store/action/article';
import { useAppSelector } from '@/store/reducer';
// import { useEffect } from 'react';
// import { useDispatch } from 'react-redux';
import ArticleList from './components/ArticleList';
import Channel from '@/components/Channel';
import styles from './index.module.scss';

// import React from 'react';
// const ArticleList = React.lazy(() => import('./components/ArticleList'));

export default function Home() {
  const { channel_id, userChannelList } = useAppSelector(
    (state) => state.channel
  );

  // 使用了无限滚动组件,默认会发送一次请求,同时挂载时也发送了一次请求
  // 两次请求的数据一样,造成id相同,报key值重复的错误(注释挂载请求)

  // const dispatch = useDispatch();
  // useEffect(() => {
  //   dispatch(getArticleListByIdAction({ channel_id }));
  // }, [channel_id, dispatch]);
  return (
    <div className={styles.root}>
      {/* 首页频道组件 */}
      <Channel />

      {userChannelList.map((item) => (
        <div
          className="channel-list"
          style={{ display: channel_id !== item.id ? 'none' : 'block' }}
          key={item.id}
        >
          {/* 首页新闻列表组件 */}
          <ArticleList channel_id={item.id} />
        </div>
      ))}

      {/* {list.map((item) => (
        <div key={item.id} className="channel-list">
          <ArticleList channel_id={item.id} />
        </div>
      ))} */}
    </div>
  );
}
